<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
    <style>
        body {
            margin: 0;
            background: url('http://114.55.64.247/minio/static/index/background.jpg') no-repeat;
            background-size: cover;
        }

        /*主体*/
        .body {
            width: 140vh;
            height: calc(100vh - 40px);
            margin: 12px auto;
            padding: 8px;
            border-radius: 14px;
            background-color: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(6px);
        }

        /*日志主体*/
        .log-body {
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        /*滚动条*/
        .log-body::-webkit-scrollbar {
            width: 8px;
            height: 10px;
        }

        /*滚动块*/
        .log-body::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background: #bebebe33;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
        }

        /*滚动槽*/
        .log-body::-webkit-scrollbar-track {
            border-radius: 0;
            background: #0000001a;
            -webkit-box-shadow: inset 0 0 5px rgba(227, 227, 227, .2);
        }

        /*日志*/
        .log {
            margin: 0;
            white-space: pre-wrap;
            font-family: 'Courier', monospace;
            font-size: 16px;
            line-height: 1.6;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/ansi_up@5.0.0"></script>
    <script type="text/javascript">
        //创建AnsiUpd对象
        const ansiUp = new AnsiUp();
        //创建sse对象
        let eventSource = new EventSource('log/getLog');
        //订阅消息
        eventSource.onmessage = (e) => {
            //并将ANSI转义码转化为HTML代码,并拼接和换行
            document.getElementById('log').innerHTML += ansiUp.ansi_to_html(e.data) + '<br>';
            // 滚动到新添加内容
            document.getElementById('logBody').scrollTop = document.getElementById('logBody').scrollHeight;
        };
        //错误处理
        eventSource.onerror = () => {
            eventSource.close()
        }
    </script>
</head>
<body>
<!--主体-->
<div class="body">
    <!--日志主体-->
    <div class="log-body" id="logBody">
        <!--日志输出-->
        <pre class="log" id="log"></pre>
    </div>
</div>
</body>
</html>